<template>
	<div>
    <div>
      <el-row>
        <el-col :offset="2" :span="4">
          <el-input v-model="studentname" placeholder="请输入菜品名搜索"></el-input>
        </el-col>
        <el-col :offset="1" :span="6">
          <el-button type="primary" @click="selectbyname(studentname)">搜索</el-button>
        </el-col>
        <el-col :offset="3" :span="6">
          <!-- <el-button
          
          @click="handleAdd()" type="primary">新增</el-button> -->
        </el-col>
        <!-- <el-col :span="6"><div class="grid-content bg-purple-light">4</div></el-col> -->
      </el-row>
    </div>

    <el-col>
      &nbsp;
    </el-col>

		<el-table
    :data="studentData"
    style="width: 100%">
    <el-table-column
      label="id"
      width="180">
      <template slot-scope="scope">
        <!-- <i class="el-icon-time"></i> -->
        <span style="margin-left: 10px">{{ scope.row.id }}</span>
      </template>
    </el-table-column>
	<el-table-column
      label="类型"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.category }}</span>
      </template>
    </el-table-column>
	<el-table-column
      label="菜品名"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="价格"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.price }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="图片"
      width="180">
      <template slot-scope="scope">
		<el-image
			style="width: 100px; height: 100px"
			:src="'http://162.14.107.118/image/food'+ scope.row.image "
			></el-image>
        <!-- <span style="margin-left: 10px">{{ scope.row.image }}</span> -->
      </template>
    </el-table-column>
    <!-- <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.phone }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column> -->


    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">更改菜品价格</el-button>
        <!-- <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
      </template>
    </el-table-column>
  		</el-table>
        <el-dialog
          title=" 更改价格或更改菜品名称"
          :visible.sync="dialogVisible"
          width="30%"
          >

          <!-- 数据表单 -->
          <el-form :model="formdata"  top="1vh">
            <el-form-item label="id" prop="title">
                <el-input
                  v-model="formdata.id"
                  autocomplete="off"
				  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="菜品类型" prop="title">
                <el-input
                  v-model="formdata.category"
                  autocomplete="off"
				  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="菜品名" prop="title">
                <el-input
                  v-model="formdata.name"
                  autocomplete="off"
				  :disabled="true"
				  
				  ></el-input>
              </el-form-item>
			  <!-- <el-form-item label="图片" prop="title">
                <el-image 
					style="width: 80px; height: 80px"
					:src="'http://162.14.107.118/image/food'+ formdata.image "
					:fit="fit"></el-image>
              </el-form-item> -->
              <el-form-item label="价格" prop="title">
                <el-input
                  v-model="formdata.price"
                  autocomplete="off"

                ></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer" >
            <el-button type="primary" @click="modifyStudent(formdata)" >确 定</el-button>
            <el-button @click="dialogVisible = false" >取 消</el-button>
          </span>
      </el-dialog>
	</div>
</template>



<script>
	import axios from 'axios';
  export default {
    data() {
      return {
        studentname:"",
		    studentData:[],
        formdata:{},
        dialogVisible:false,
        requesturl:"http://162.14.107.118:8086/",
      }
    },
    methods: {

      modifyStudent(formdata){

		formdata.price=parseInt(formdata.price)
		if(formdata.price>0 && formdata.price%1===0)
		{
		 axios.get(this.requesturl+`PC/modifyFoodPrice/${formdata.id}/${formdata.price}`
				).then(res=>{
					if(res.data.status)
						this.$message({
							message: '价格更改成功',
							type: 'success'
						});
			})
		}else{
			this.$message.error('价格必须时大于0的整数');
		}
 
            this.dialogVisible = false
      },
      handleAdd(){
        this.dialogVisible = true
        this.formdata={}
      },
      //根据学生姓名搜索
      selectbyname(studentname){
			axios.get(this.requesturl+`PC/getFoodByName/${studentname}`).then(res=>{
				if(res.data.status)
					this.studentData=res.data.data
				else
					this.$message.error('表中没有这个商品');
			})

      },
		handleEdit(index, row) {
          this.dialogVisible = true
          this.formdata=row

      	},
	
		//获得所有菜品信息   
		getStudentInfo(){
			axios.get(this.requesturl+"PC/getAllFood").then(res=>{
				this.studentData=res.data.data;

			})
		}
    },
	created(){
		this.getStudentInfo();
	},

  }
</script>
